<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>loading...</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="./maptalks/maptalks.css">
    <link rel="stylesheet" href="./zTreeStyle/zTreeStyle.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        #container .ivu-table-wrapper {
            overflow: visible;
        }
        
        #container .ivu-table-cell {
            padding-left: 0px;
            padding-right: 0px;
        }
        
        #bmap {
            position: absolute;
            top: 0;
            left: 490px;
            bottom: 0;
            right: 0;
        }
        
        #controller {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 490px;
            border-right: 1px solid #A4D4F5;
            padding: 10px;
            box-sizing: border-box;
            /* overflow-y: auto; */
        }
        
        #controller .controller-inner {
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        
        .el-zoom-in-bottom-enter-active,
        .el-zoom-in-bottom-leave-active {
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        
        .el-zoom-in-bottom-enter,
        .el-zoom-in-bottom-leave-active {
            opacity: 0;
            -webkit-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        .el-zoom-in-top-enter-active,
        .el-zoom-in-top-leave-active {
            transition: transform .3s cubic-bezier(.23, 1, .32, 1) .1s, opacity .3s cubic-bezier(.23, 1, .32, 1) .1s
        }
        
        .el-zoom-in-top-enter-active,
        .el-zoom-in-top-leave-active {
            opacity: 1;
            -ms-transform: scaleY(1);
            transform: scaleY(1);
            -ms-transform-origin: center top;
            transform-origin: center top
        }
        
        .el-zoom-in-top-enter,
        .el-zoom-in-top-leave-active {
            opacity: 0;
            -ms-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        #container .circular-ctrl {
            position: absolute;
            width: 400px;
            bottom: 10px;
            right: 10px;
            border: 1px solid #A4D4F5;
            background-color: #ffffff;
        }
        
        #container .area-ctrl {
            position: absolute;
            width: 400px;
            top: 10px;
            left: 500px;
            border: 1px solid #A4D4F5;
            background-color: #ffffff;
            border-radius: 5px;
        }
        
        .ivu-drawer {
            width: auto;
            height: 100%;
            position: fixed;
            top: 0
        }
        
        .ivu-drawer-inner {
            position: absolute
        }
        
        .ivu-drawer-left {
            left: 0
        }
        
        .ivu-drawer-right {
            right: 0
        }
        
        .ivu-drawer-hidden {
            display: none!important
        }
        
        .ivu-drawer-wrap {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            -webkit-overflow-scrolling: touch;
            outline: 0
        }
        
        .ivu-drawer-wrap-inner {
            position: absolute;
            overflow: hidden
        }
        
        .ivu-drawer-wrap * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }
        
        .ivu-drawer-mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(55, 55, 55, .6);
            height: 100%;
            z-index: 1000
        }
        
        .ivu-drawer-mask-hidden {
            display: none
        }
        
        .ivu-drawer-mask-inner {
            position: absolute
        }
        
        .ivu-drawer-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: #fff;
            border: 0;
            background-clip: padding-box;
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
        }
        
        .ivu-drawer-content-no-mask {
            pointer-events: auto
        }
        
        .ivu-drawer-header {
            border-bottom: 1px solid #e8eaec;
            padding: 14px 16px;
            line-height: 1
        }
        
        .ivu-drawer-header p,
        .ivu-drawer-header-inner {
            display: inline-block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #17233d;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        
        .ivu-drawer-header p i,
        .ivu-drawer-header p span {
            vertical-align: middle
        }
        
        .ivu-drawer-close {
            z-index: 1;
            font-size: 12px;
            position: absolute;
            right: 8px;
            top: 8px;
            overflow: hidden;
            cursor: pointer
        }
        
        .ivu-drawer-close .ivu-icon-ios-close {
            font-size: 31px;
            color: #999;
            -webkit-transition: color .2s ease;
            transition: color .2s ease;
            position: relative;
            top: 1px
        }
        
        .ivu-drawer-close .ivu-icon-ios-close:hover {
            color: #444
        }
        
        .ivu-drawer-body {
            width: 100%;
            height: calc(100% - 51px);
            padding: 16px;
            font-size: 12px;
            line-height: 1.5;
            word-wrap: break-word;
            position: absolute;
            overflow: auto
        }
        
        .ivu-drawer-no-header .ivu-drawer-body {
            height: 100%
        }
        
        .ivu-drawer-no-mask {
            pointer-events: none
        }
        
        .move-left-appear,
        .move-left-enter-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }
        
        .move-left-leave-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }
        
        .move-left-appear,
        .move-left-enter-active {
            -webkit-animation-name: ivuMoveLeftIn;
            animation-name: ivuMoveLeftIn;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }
        
        .move-left-leave-active {
            -webkit-animation-name: ivuMoveLeftOut;
            animation-name: ivuMoveLeftOut;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }
        
        .move-left-appear,
        .move-left-enter-active {
            opacity: 0;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }
        
        .move-left-leave-active {
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }
        
        .move-right-appear,
        .move-right-enter-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }
        
        .move-right-leave-active {
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }
        
        .move-right-appear,
        .move-right-enter-active {
            -webkit-animation-name: ivuMoveRightIn;
            animation-name: ivuMoveRightIn;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }
        
        [v-cloak] {
            display: none
        }
        
        .move-right-leave-active {
            -webkit-animation-name: ivuMoveRightOut;
            animation-name: ivuMoveRightOut;
            -webkit-animation-play-state: running;
            animation-play-state: running
        }
        
        .move-right-appear,
        .move-right-enter-active {
            opacity: 0;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }
        
        .move-right-leave-active {
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out
        }
        
        @-webkit-keyframes ivuMoveLeftIn {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
        }
        
        @keyframes ivuMoveLeftIn {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
        }
        
        @-webkit-keyframes ivuMoveLeftOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
        }
        
        @keyframes ivuMoveLeftOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0
            }
        }
        
        @-webkit-keyframes ivuMoveRightIn {
            0% {
                opacity: 0;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%)
            }
            100% {
                opacity: 1;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }
        }
        
        @keyframes ivuMoveRightIn {
            0% {
                opacity: 0;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%)
            }
            100% {
                opacity: 1;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }
        }
        
        @-webkit-keyframes ivuMoveRightOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0
            }
        }
        
        @keyframes ivuMoveRightOut {
            0% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }
            100% {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0
            }
        }
        
        div.selected-map-wrap {
            height: 46px;
            width: 46px;
            background-color: rgba(203, 233, 245, 0.6);
            cursor: pointer;
            padding: 5px;
            border-radius: 7px;
        }
        
        div.selected-map-wrap div.map-icon {
            width: 36px;
            height: 36px;
        }
        
        div.selected-map-wrap div.map-icon>img {
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        div.selected-map-inner {
            height: 36px;
            width: 36px;
            position: relative;
            overflow: hidden;
        }
        
        div.selected-map-list {
            position: absolute;
            top: 46px;
            left: 0px;
            right: 0px;
            background-color: rgba(203, 233, 245, 0.6);
            z-index: 99;
            border-radius: 7px;
            overflow: hidden;
        }
        
        div.selected-map-list>div {
            padding: 5px;
        }
        
        div.selected-map-list>div:hover {
            background-color: #FCF0C0;
        }
        
        div.selected-map-list>div.actived {
            background-color: #FCF0C0;
        }
        
        div.map-selector-popup {
            position: absolute;
            right: 46px;
            width: 155px;
            height: 60px;
            padding: 5px 0px 5px 5px;
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            background-color: rgba(203, 233, 245, 0.6);
        }
        
        .MapSelector_item_193IR {
            height: 50px;
            width: 50px;
            float: left;
            border: 1px solid;
            cursor: pointer;
            position: relative;
            margin-right: 5px;
        }
        
        .satellite-map {
            background: url(./images/model-satel.png) no-repeat;
            background-position: 50%;
        }
        
        .normal-map {
            background: url(./images/model-map.png) no-repeat;
            background-position: 50%;
        }
        
        .map_icon_traffic_off {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_traffic_on {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_xiansu_off {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_icon_xiansu_on {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_selector_icon_text {
            position: absolute;
            bottom: 1px;
            left: 1px;
            right: 1px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
        }
        
        .no_selected_icon {
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .selected_icon {
            background-color: rgba(64, 150, 209, 0.9);
            color: rgb(255, 255, 255);
        }
        
        div.maptalks-attribution {
            display: none;
        }
        
        .map-mark {
            position: absolute;
            right: 0px;
            top: 100px;
        }
        
        .map-mark .map-mark-close {
            height: 50px;
            width: 20px;
            padding: 5px 0px;
            background-color: #34598A;
            border-radius: 10px 0px 0px 10px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .map-mark .map-mark-close>div {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #ffffff;
        }
        
        .map-mark .map-mark-wrapper {
            width: 230px;
        }
        
        .map-mark .map-mark-header {
            height: 40px;
            position: relative;
        }
        
        .map-mark .map-mark-header .close-btn {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 20px;
            border-radius: 10px 0px 0px 0px;
            background-color: #34598A;
            cursor: pointer;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
        
        .map-mark-header-content {
            position: absolute;
            left: 20px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: #7F8FA7;
            line-height: 40px;
            font-size: 14px;
            color: #000000;
            padding-left: 10px;
        }
        
        .map-mark-header-content>div {
            position: absolute;
            height: 0px;
            width: 0px;
            border-top: 6px solid transparent;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
            position: absolute;
            bottom: 0px;
            left: 20px;
        }
        
        .map-mark .map-mark-content {
            background-color: #ffffff;
            width: 100%;
            height: 300px;
            border-left: 1px solid #e3e3e3;
            border-right: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
            position: relative;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div id="container" v-cloak>
        <div id="controller">
            <div class="controller-inner">
                <Row style="padding:0 0 10px 0">
                    <i-col :span="24">
                        <span>{{ isZh ? '设备名称' : 'Device Name'}}:{{devicename}}</span> &nbsp;&nbsp;&nbsp;
                        <span>{{ isZh ? '设备序号' : 'ID'}}:{{deviceid}}</span>
                    </i-col>
                </Row>
                <div style="padding:0 0 10px 0;overflow: hidden;">
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button style="width:70px;" @click="drawCircular">{{ isZh ? '圆' : 'Circle'}}</i-button>
                    </div>
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button style="width:70px;" @click="drawRectangle">{{ isZh ? '长方形' : 'Rect'}}</i-button>
                    </div>
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button style="width:70px;" @click="drawPolygon">{{isZh ? '多边形' : 'Polygon'}}</i-button>
                    </div>
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button @click="areaModal" style="width:70px;">{{isZh ? '区域' : 'Area'}}</i-button>
                    </div>
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button @click="addRoutePlanningTip" style="width:70px;">{{isZh ? '路线' : 'Route'}}</i-button>
                    </div>
                    <div style="float: left;width: 16.666%;text-align:center;">
                        <i-button @click="openDrawer" style="width:70px;">{{isZh ? '系统围栏' : 'sFence'}}</i-button>
                    </div>
                </div>
                <i-table border stripe ref="selection" :columns="columns" :data="tableData" size="small" :loading="loading" @on-selection-change="handleSelectChange"></i-table>
            </div>
        </div>
        <div id="bmap"></div>

        <map-track @on-map-track="onQueryTrack"></map-track>

        <div style="position: absolute; right:10px;top:10px;">
            <div>
                <selected-map @select-map="onSelectMap" @switch-traffic="onSwitchTraffic"></selected-map>
            </div>
        </div>

        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="isCircular">
                <Row>
                    <i-col v-if="isZh" :span="24" style="padding:10px;text-align:center;">
                        <h3>{{isEidt?'编辑围栏':'新增围栏'}} - 半径:{{radius}}{{isZh ? '米':'m'}}</h3>
                    </i-col>
                    <i-col v-else :span="24" style="padding:10px;text-align:center;">
                        <h3>{{isEidt?'Edit fence':'Adit fence'}} - Radius:{{radius}}metre</h3>
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="isPolygon">
                <Row>
                    <i-col v-if="isZh" :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "编辑多边形":"添加多边形" }}</h3>
                    </i-col>
                    <i-col v-else :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "Edit poly":"Add Polygon" }}</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col v-if="isZh" :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 把鼠标移到 地图上单击开始绘制，双击结束绘制
                    </i-col>
                    <i-col v-else :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 Move the mouse over the map and click to start drawing. Double click to finish drawing
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="isRectangle">
                <Row>
                    <i-col v-if="isZh" :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "编辑长边形":"添加多边形" }}</h3>
                    </i-col>
                    <i-col v-else :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "Edit Rectangle":"Add Rectangle" }}</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col v-if="isZh" :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 把鼠标移到 地图上单击开始绘制，双击结束绘制
                    </i-col>
                    <i-col v-else :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 Move the mouse over the map and click to start drawing. Double click to finish drawing
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="isRoutePlanning">
                <Row>
                    <i-col v-if="isZh" :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "编辑路线":"添加路线" }}</h3>
                    </i-col>
                    <i-col v-else :span="24" style="padding:10px;text-align:center;">
                        <h3>{{ isEidt ? "Edit line":"Add line" }}</h3>
                    </i-col>
                </Row>
                <Row v-show="!isEidt">
                    <i-col v-if="isZh" :span="18" offset="2" style="padding:10px 0 10px 0;">
                        1 、 请在地图上点击选择起止点,绘制线路
                    </i-col>
                    <i-col v-else :span="18" offset="2" style="padding:10px 0 10px 0;">
                        1 、 Please click on the map to select the starting and ending points and draw the route
                    </i-col>
                    <i-col span="4" style="text-align: center;line-height: 38px;">
                        <i-button size="small" type="error" @click="queryRoutePlanning">{{isZh?'结束':'End'}}</i-button>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="6" style="text-align:right;line-height:32px;">
                        {{isZh ? '围栏名称' : 'Fence name'}}:
                    </i-col>
                    <i-col :span="16">
                        <i-input v-model.trim="geoName"></i-input>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="6" style="text-align:right;line-height:32px;">
                        {{isZh ? '偏离距离' : 'Deviation'}}:
                    </i-col>
                    <i-col :span="16">
                        <input-number v-model.number="distance5" :min="0" style="width: 100%;"></input-number>
                    </i-col>
                    <i-col :span="2" style="line-height:32px;">
                        {{isZh ? '米' : 'm'}}
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="6" style="text-align:right;line-height:32px;">
                        {{isZh ? '报警类型' : 'Alarm Type'}}:
                    </i-col>
                    <i-col :span="16">
                        <i-select v-model="alarmtype5">
                            <i-option value="1">{{isZh ? '偏离线路持续报警' : 'Deviation continuous alarm'}}</i-option>
                            <i-option value="2">{{isZh ? '驶入线路持续报警' : 'Drive in continuous alarm'}}</i-option>
                            <i-option value="3">{{isZh ? '偏离线路报警一次' : 'Deviation alarm once'}}</i-option>
                            <i-option value="4">{{isZh ? '驶入线路报警一次' : 'Drive in the alarm once'}}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="text-align:center;padding-bottom: 20px">
                    <i-col :span="24">
                        <i-button style="width:80%;" @click="addRoutePlanning">{{isZh ? '确定' : 'confirm'}}</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="modal">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{areaTitle}}</h3>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="6" style="text-align:center;line-height:32px;">
                        {{isZh ? '选择区域' : 'Select area'}}:
                    </i-col>
                    <i-col :span="16">
                        <Cascader :data="provinceList" v-model="areaAddress" change-on-select filterable></Cascader>
                    </i-col>
                </Row>
                <Row style="padding: 10px">
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <i-button @click="handleSubmitArea" :loading="arealoading" style="width:200px;">{{isZh ? '保存' : 'Save'}}</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>
        <Modal v-model="geoNameModal" width="400">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <Icon type="ios-hammer-outline"></Icon>
                <span>{{isZh ? "修改围栏名称" : "Modify fence name"}}</span>
            </p>
            <Row style="padding: 10px">
                <i-col :span="6" style="text-align:center;line-height:32px;">
                    {{isZh ? '围栏名称' : 'Fence name'}}:
                </i-col>
                <i-col :span="16">
                    <i-input v-model.trim="geoName"></i-input>
                </i-col>
            </Row>
            <div slot="footer" style="text-align:center;">
                <i-button style="width:80%;" @click="changeGeoName">{{isZh ? '确定' : 'confirm'}}</i-button>
            </div>
        </Modal>
        <Drawer :title="isZh?'添加系统围栏':'Add system fence'" width="400" v-model="drawerModal">
            <Row style="width:100%" v-if="userType < 2">
                <i-col :span="16">
                    <i-input style="width:100%;" v-model="searchValue" suffix="ios-search"></i-input>
                </i-col>
                <i-col :span="8" style="padding:0 0 0 10px;">
                    <i-button @click="jumpSystemFence" style="width:100%;">{{isZh ? '设置系统围栏' : 'System fence'}}</i-button>
                </i-col>
            </Row>
            <Row style="width:100%" v-else>
                <i-col :span="24">
                    <i-input style="width:100%;" v-model="searchValue" suffix="ios-search"></i-input>
                </i-col>
            </Row>
            <div class="tree-box">
                <Tree :data="treeData"></Tree>
            </div>
        </Drawer>
    </div>


    <script type="text/x-template" id="selected-map-template">
        <div class="selected-map-wrap" v-click-outside.capture="onClickOutside">
            <div class="selected-map-inner" @click="isShowMapList=true">
                <div class="map-icon" :title="mapTypeStr"><img :src="mapIcon"></div>
            </div>
            <div class="selected-map-list" v-show="isShowMapList">
                <div v-for="(item,index) in mapSelectorList" :data-index="index" :class="{actived:mapType==item.value}" :key="index" @click="selectedMap(index)">
                    <div class="map-icon" :title="item.label">
                        <img :src="item.src">
                    </div>
                </div>
            </div>
            <div class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <div v-if="false" class="MapSelector_item_193IR" :class="{'map_icon_xiansu_off':!isShowXianSu,'map_icon_xiansu_on':isShowXianSu}" style="width:35px" @click="isShowXianSu=!isShowXianSu">
                    <div class="map_selector_icon_text no_selected_icon">{{speed}}</div>
                </div>
                <div class="MapSelector_item_193IR" :class="{'map_icon_traffic_off':!isShowTraffic,'map_icon_traffic_on':isShowTraffic}" style="width:35px" @click="isShowTraffic=!isShowTraffic">
                    <div class="map_selector_icon_text no_selected_icon">{{traffic}}</div>
                </div>
                <div class="MapSelector_item_193IR normal-map" @click="isSatelliteMap=false">
                    <div class="map_selector_icon_text" :class="{'selected_icon':!isSatelliteMap,'no_selected_icon':isSatelliteMap}">{{map}}</div>
                </div>
                <div class="MapSelector_item_193IR satellite-map" @click="isSatelliteMap=true">
                    <div class="map_selector_icon_text" :class="{'selected_icon':isSatelliteMap,'no_selected_icon':!isSatelliteMap}">{{satellite}}</div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-template" id="map-track-template">
        <div class="map-mark">
            <div v-show="isClose" class="map-mark-close" @click="isClose=false">
                <div>{{ isZh ? '轨' : 'T' }}</div>
                <div>{{ isZh ? '迹' : 'K' }}</div>
            </div>
            <div v-show="!isClose" class="map-mark-wrapper">
                <div class="map-mark-header">
                    <div class="close-btn" @click="isClose=true">
                        <Icon type="ios-arrow-forward" size="18" />
                    </div>
                    <div class="map-mark-header-content">
                        {{ isZh ? '参考轨迹' : 'Reference trajectory' }}
                        <div></div>
                    </div>
                </div>
                <div class="map-mark-content">
                    <Row style="margin:0 0px 10px 0px;">
                        <i-col span="22" offset="1">
                            <Date-Picker type="date" v-model="date" style="width: 100%" size="small" :clearable="false"></Date-Picker>
                        </i-col>
                    </Row>
                    <Row style="margin:0 0px 10px 0px;">
                        <i-col span="15" offset="1">
                            <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="onClickIcon" @on-change="sosoValueChange" size="small"></i-input>
                        </i-col>
                        <i-col span="6" offset="1">
                            <i-button type="primary" :loading="loading" style="width: 100%" size="small" @click="queryTracks">{{ isZh ? '查询' : 'Query' }}</i-button>
                        </i-col>
                    </Row>
                    <div style="height:215px;overflow-y:auto;overflow-x:hidden;margin:0px 2px">
                        <ul id="gztree" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
    <script src="./js/globalorgan.js"></script>
    <script src="js/config.js"></script>
    <script src="js/v-click-outside-x.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/util.js"></script>
    <script src="js/area.js"></script>
    <script src="./maptalks/maptalks.min.js"></script>
    <script>
        var isZh = utils.locale === 'zh';
        var devicename = utils.getParameterByName("devicename");
        document.title = isZh ? devicename + " | 电子围栏" : devicename + " | Fence";
        iview.lang(isZh ? 'zh-CN' : 'en-US');
        var deviceid = utils.getParameterByName("deviceid");
        var userName = utils.getParameterByName("username");
        var token = utils.getParameterByName("token");
        var lat = utils.getParameterByName("lat");
        var lon = utils.getParameterByName("lon");
        var icontype = utils.getParameterByName("icontype");
        var course = utils.getParameterByName("course");
        var map = null;
        var vRoot = null;
        var rowData = null;
        var mapType = utils.getMapType();
        var globalSelection = [];

        var symbol = {
            'lineColor': '#e4393c',
            'lineWidth': 2,
            'polygonFill': 'rgb(135,196,240)',
            'polygonOpacity': 0
        };
        //实例化鼠标绘制工具  

        var messages = {
            defaultLang: 'zh',
            en: {
                monitor: {
                    reLogin: "Please re-login and automatically jump to the login page in 2 seconds",
                    CMD_SEND_RESULT_UNCONFIRM: 'Sent successfully, no confirmation received',
                    CMD_SEND_CONFIRMED: 'send was successful',
                    CMD_SEND_RESULT_PASSWORD_ERROR: 'Password error',
                    CMD_SEND_RESULT_OFFLINE_NOT_CACHE: 'Device offline, not cached',
                    CMD_SEND_RESULT_OFFLINE_CACHED: 'Device offline, cached',
                    CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD: 'The default password needs to be changed',
                    CMD_SEND_RESULT_DETAIL_ERROR: 'error:',
                    CMD_SEND_OVER_RETRY_TIMES: 'Three attempts to send failed',
                    CMD_SEND_SYNC_TIMEOUT: 'Send Timeout',
                },
            },
            zh: {
                monitor: {
                    reLogin: "请重新登录,2秒后自动跳转登录页面",
                    CMD_SEND_RESULT_UNCONFIRM: '发送成功，未收到确认',
                    CMD_SEND_CONFIRMED: '发送成功',
                    CMD_SEND_RESULT_PASSWORD_ERROR: '密码错误',
                    CMD_SEND_RESULT_OFFLINE_NOT_CACHE: '设备离线，未缓存',
                    CMD_SEND_RESULT_OFFLINE_CACHED: '设备离线，已缓存',
                    CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD: '需要修改默认密码',
                    CMD_SEND_RESULT_DETAIL_ERROR: '错误:',
                    CMD_SEND_OVER_RETRY_TIMES: '尝试发送3次失败',
                    CMD_SEND_SYNC_TIMEOUT: '发送超时',
                },

            }
        }


        function treeItemRender(h, params) {
            var root = params.root,
                node = params.node,
                row = params.data;
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '343px'
                },
            }, [
                h('span', [
                    h('span', {
                        style: {
                            width: '271px',
                            lineHeight: '23px',
                            display: 'inline-block',
                        },
                        on: {
                            click: function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                if (row.children) {
                                    vRoot.handleSelectChange(row.children);
                                }
                                return false;
                            },
                        }
                    }, row.title)
                ]),
                row.children ?
                h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {

                    },
                    on: {
                        click: function(e) {
                            e.preventDefault();
                            e.stopPropagation();

                            var url = myUrls.addGeoRecord();
                            var data = {
                                type: 4,
                                categoryid4: row.categoryid,
                                name: row.title,
                                deviceid: deviceid
                            };
                            utils.sendAjax(url, data, function(resp) {
                                if (resp.status == 0) {
                                    vRoot.$Message.success(isZh ? "添加成功" : "Added successfully");
                                    vRoot.getFenceInfo();
                                } else {
                                    vRoot.$Message.error(isZh ? "添加失败" : "Add failed");
                                }
                            })
                            return false;
                        }
                    }
                }, isZh ? "添加" : "Add") : null,
            ]);
        }

        (function() {

            Vue.component('selected-map', {
                data: function() {
                    return {
                        isShowMapList: false, //是否显示选择框
                        isSatelliteMap: false, //是否卫星地图
                        isShowXianSu: false,
                        isShowTraffic: false,
                        mapSelectorList: [{
                            label: isZh ? "百度地图" : "BaiduMap",
                            value: "bMap",
                            src: './images/map/bMap.png',
                        }, {
                            label: isZh ? "高德地图" : "AMap",
                            value: "aMap",
                            src: './images/map/aMap.png',
                        }, {
                            label: isZh ? "国内谷歌" : "gChinaMap",
                            value: "gChinaMap",
                            src: './images/map/gChinaMap.png',
                        }, {
                            label: isZh ? "谷歌地图" : "GoogleMap",
                            value: "gMap",
                            src: './images/map/gMap.png',
                        }, ],
                        speed: isZh ? "限速" : "Speed",
                        traffic: isZh ? "路况" : "Traffic",
                        map: isZh ? "地图" : "Map",
                        satellite: isZh ? "卫星" : "Satellite",
                        currentMapIndex: 0,
                        mapType: mapType
                    }
                },
                methods: {
                    onClickOutside: function() {
                        this.isShowMapList = false;
                    },
                    selectedMap: function(index) {

                        var item = this.mapSelectorList[index];
                        this.mapType = item.value;
                        this.$emit('select-map', {
                            mapType: item.value,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                        this.currentMapIndex = index;
                    },
                    getCurrentMapIndex: function() {
                        var index = 0;
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                index = i;
                                break;
                            }
                        }
                        return index;
                    }
                },
                computed: {
                    mapIcon: function() {
                        return './images/map/' + this.mapType + '.png';
                    },
                    mapTypeStr: function() {
                        var mapTypeStr = '';
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                mapTypeStr = item.label;
                                break;
                            }
                        }
                        return mapTypeStr;
                    },
                    mapSelectorPopupSty: function() {
                        var top = 46;
                        var currentMapIndex = this.currentMapIndex;
                        var maxCurrentIndex = this.mapSelectorList.length - 1;

                        top = top * (currentMapIndex + 1);

                        if (currentMapIndex == maxCurrentIndex) {
                            top -= 14;
                        }

                        return {
                            top: top + 'px'
                        }
                    }
                },
                watch: {
                    isSatelliteMap: function() {
                        this.$emit('select-map', {
                            mapType: this.mapType,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                    },
                    isShowXianSu: function(newVal) {
                        this.$emit('switch-xiansu', newVal);
                    },
                    isShowTraffic: function(newVal) {
                        this.$emit('switch-traffic', newVal);
                    },
                },
                mounted: function() {
                    this.currentMapIndex = this.getCurrentMapIndex();
                },
                template: document.getElementById('selected-map-template').innerHTML
            })



            Vue.component('map-track', {
                data: function() {
                    return {
                        isZh: isZh,
                        loading: false,
                        isClose: true,
                        sosoValue: '',
                        date: new Date()
                    }
                },
                methods: {
                    queryTracks: function() {

                        if (this.sosoValue == '') {
                            this.$Message.error(isZh ? '请选择设备ID' : 'Please select a device ID');
                            return;
                        };
                        var me = this;
                        var offset = DateFormat.getOffset();
                        var day = this.date.getFullYear() + '-' + (this.date.getMonth() + 1) + '-' + +this.date.getDate()
                        var url = myUrls.queryTracks();
                        var data = {
                            deviceid: this.sosoValue,
                            lbs: 1,
                            timezone: offset,
                            begintime: day + ' 00:00:00',
                            endtime: day + ' 23:59:59',
                        };
                        me.loading = true;
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0 && resp.records != null) {
                                var records = resp.records;
                                me.$emit('on-map-track', records)
                            } else {
                                me.$Message.error(isZh ? '没有轨迹' : 'No Track');
                                me.$emit('on-map-track', []);
                            }
                            me.loading = false;
                        }, function() {
                            me.loading = false;
                        });

                    },
                    sosoValueChange: function() {
                        var newVal = this.sosoValue;
                        if (newVal == '' || newVal == null) {
                            this.treeGroupList[0].open = true;
                            this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                        } else {
                            var limitcount = 0;
                            var data = this.variableDeepGroupSearch(this.treeGroupList, newVal.toLowerCase(), limitcount);
                            if (data.length == 0) {
                                data.push({
                                    name: isZh ? '无数据' : 'No data',
                                    nocheck: true
                                })
                            }
                            this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, data);
                        }
                    },
                    onClickIcon: function() {
                        if (this.sosoValue != '') {
                            this.treeGroupList[0].open = true;
                            this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                            this.sosoValue = '';
                        }
                    },
                    queryDevicesTree: function() {
                        var me = this;
                        this.loading = true;
                        GlobalOrgan.getInstance().getGlobalOrganData(function(rootuser) {
                            me.loading = false;
                            me.setTreeDataList(rootuser);
                        })
                    },
                    setTreeDataList: function(rootuser) {
                        var me = this;
                        this.gsetting = {
                            check: {
                                enable: true,
                                chkStyle: "radio",
                                radioType: "all"
                            },
                            view: {
                                dblClickExpand: false
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            callback: {
                                onCheck: function() {
                                    var nodes = me.treeObj.getCheckedNodes();
                                    if (nodes.length) {
                                        me.sosoValue = nodes[0].deviceid;
                                    }
                                },

                            }
                        };

                        this.treeGroupList = [this.castUsersTreeToDevicesTree(rootuser, true, true)];

                        this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                    },
                    variableDeepGroupSearch: function(treeDataFilter, searchWord, limitcount) {
                        var childTemp = [];
                        var that = this;
                        for (var i = 0; i < treeDataFilter.length; i++) {
                            var copyItem = null;
                            var item = treeDataFilter[i];
                            if (item != null) {

                                var isFound = false;
                                if (item.name.toLowerCase().indexOf(searchWord) != -1) {
                                    copyItem = item;
                                    copyItem.open = false;
                                    isFound = true;
                                }
                                if (isFound == false && item.children) {
                                    // item.expand = true;
                                    // childTemp.push(item);
                                    var rs = that.variableDeepGroupSearch(item.children, searchWord, limitcount);
                                    if (rs && rs.length > 0) {
                                        copyItem = deepClone(item);
                                        copyItem.children = rs;
                                        copyItem.open = true;
                                        isFound = true;
                                    }
                                }

                                if (isFound == true) {
                                    limitcount++;
                                    childTemp.push(copyItem);

                                    if (limitcount > 1000) {
                                        break;
                                    }
                                }
                            }
                        }

                        return childTemp;
                    },
                    getDeviceListGroups: function(groups, isNeedDevice, username, isNeedRadio) {
                        var groupsList = [],
                            me = this;
                        if (groups != null) {
                            for (var i = 0; i < groups.length; ++i) {
                                var group = groups[i];
                                var groupObj = {
                                    groupid: group.groupid,
                                    name: group.groupname,
                                    icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg",
                                    nocheck: isNeedRadio,
                                }
                                if (isNeedDevice) {
                                    groupObj.render = utils.renderGroup;

                                } else {
                                    groupObj.totalCount = group.devices.length;
                                    groupObj.name = group.groupname + '(' + group.devices.length + ')';
                                }
                                if (isNeedDevice && group.devices) {
                                    groupObj.totalCount = group.devices.length;
                                    groupObj.children = [];
                                    groupObj.name = group.groupname + '(' + group.devices.length + ')';
                                    group.devices.forEach(function(device) {
                                        groupObj.children.push({
                                            deviceid: device.deviceid,
                                            name: device.devicename,
                                            icon: utils.getzTreeDeviceIcon(device),
                                        });
                                        utils.deviceInfos[device.deviceid] = {
                                            deviceid: device.deviceid,
                                            devicename: device.devicename,
                                            username: username,
                                            groupid: group.groupid,
                                            groupname: group.groupname,
                                            forwardid: device.forwardid,
                                            needalarmstr: device.needalarmstr,
                                            creater: device.creater,
                                            devicetype: device.devicetype,
                                        }
                                    });
                                }
                                groupsList.push(groupObj);
                            }
                        }

                        if (groupsList.length == 0) {
                            groupsList.push({
                                name: 'Default(0)',
                                groupid: 0,
                                totalCount: 0,
                                children: [],
                                nocheck: isNeedRadio,
                                icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                            });
                        }
                        return groupsList;

                    },
                    doCastUsersTreeToDevicesTree: function(usersTrees, isNeedDevice, isNeedRadio) {
                        var devicesTreeRecord = [];
                        if (usersTrees != null && usersTrees.length > 0) {
                            for (var i = 0; i < usersTrees.length; ++i) {
                                var usersTree = usersTrees[i];
                                var username = usersTree.username;
                                var subusers = usersTree.subusers;
                                var currentsubDevicesTreeRecord = {
                                    name: username,
                                    username: username,
                                    nocheck: isNeedRadio,
                                    icon: myUrls.viewhost + "zTreeStyle/img/diy/account.svg"
                                };
                                var deviceListGroups = this.getDeviceListGroups(usersTree.groups, isNeedDevice, username, isNeedRadio);
                                if (username != null && subusers != null && subusers.length > 0) {
                                    var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                                    subDevicesTreeRecord = deviceListGroups.concat(subDevicesTreeRecord);
                                    currentsubDevicesTreeRecord.children = subDevicesTreeRecord;
                                } else {
                                    currentsubDevicesTreeRecord.children = deviceListGroups;

                                }
                                var totalCount = 0;
                                if (currentsubDevicesTreeRecord.children) {
                                    for (var j = 0; j < currentsubDevicesTreeRecord.children.length; ++j) {
                                        totalCount += currentsubDevicesTreeRecord.children[j].totalCount;
                                    }
                                }
                                currentsubDevicesTreeRecord.totalCount = totalCount;
                                currentsubDevicesTreeRecord.name = username + "(" + totalCount + ")";
                                devicesTreeRecord.push(currentsubDevicesTreeRecord);
                            }
                        }
                        return devicesTreeRecord;
                    },
                    castUsersTreeToDevicesTree: function(devicesTreeRecord, isNeedDevice, isNeedRadio) {
                        var iViewTree = {
                            open: true,
                            nocheck: isNeedRadio,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/1_open.png"
                        };
                        if (devicesTreeRecord != null) {
                            var username = devicesTreeRecord.username;
                            var subusers = devicesTreeRecord.subusers;
                            iViewTree.name = username;
                            iViewTree.username = username;
                            var deviceListGroups = this.getDeviceListGroups(devicesTreeRecord.groups, isNeedDevice, username, isNeedRadio);
                            if (username != null && subusers != null && subusers.length > 0) {
                                var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                                iViewTree.children = deviceListGroups.concat(subDevicesTreeRecord);
                            } else {
                                iViewTree.children = deviceListGroups;
                            }
                            var totalCount = 0;
                            if (iViewTree.children) {
                                for (var i = 0; i < iViewTree.children.length; ++i) {
                                    totalCount += iViewTree.children[i].totalCount;
                                }
                            }
                            iViewTree.name = username + "(" + totalCount + ")";
                        }
                        return iViewTree;
                    },

                },
                mounted: function() {
                    this.queryDevicesTree();
                },
                template: document.getElementById('map-track-template').innerHTML
            });


            vRoot = new Vue({
                el: "#container",
                i18n: utils.getI18n(),
                data: {
                    isZh: isZh,
                    devicename: devicename,
                    arealoading: false,
                    deviceid: deviceid,
                    tipTitle: isZh ? "多边形提示" : "Polygon tips",
                    tipContent: isZh ? '点击多边形按钮,单击画图,双击结束' : 'Click the polygon button, click draw, double-click to finish',
                    isEidt: false,
                    map: null,
                    geoName: '',
                    geoNameModal: false,
                    drawerModal: false,
                    distance5: 20,
                    alarmtype5: '1',
                    searchValue: '',
                    mapType: mapType, // BMap GMap AMap;
                    columns: [{
                        type: 'selection',
                        width: 45,
                        align: 'center'
                    }, {
                        type: 'index',
                        width: 45,
                        align: 'center',
                    }, {
                        title: isZh ? '创建者' : 'Creater',
                        key: 'creater',
                        align: 'center'
                    }, {
                        title: isZh ? '类型' : 'Type',
                        key: 'type',
                        width: 55,
                        align: 'center',
                        render: function(h, params) {
                            var type = '';
                            switch (params.row.type) {
                                case 1:
                                    type = isZh ? '圆' : 'Circle'
                                    break;
                                case 2:
                                    type = isZh ? '多边形' : 'Polygon'
                                    break;
                                case 3:
                                    type = isZh ? '行政区域' : 'Area'
                                    break;
                                case 4:
                                    type = isZh ? '系统围栏' : 'System fence'
                                    break;
                                case 5:
                                    type = isZh ? '路线规划' : 'Route Planning'
                                    break;
                                case 6:
                                    type = isZh ? '长方形' : 'Rectangle'
                                    break;
                            }
                            return h('div', [h('span', {}, type)]);
                        }
                    }, {
                        title: isZh ? '名称' : 'Geo name',
                        key: 'geoname',
                        align: 'center',
                        render: function(h, params) {
                            return h('div', [
                                h('span', {}, params.row.name), ,
                                h('Icon', {
                                    props: {
                                        size: 20,
                                        type: "md-create"
                                    },
                                    style: {
                                        marginLeft: '5px'
                                    },
                                    on: {
                                        click: function(e) {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            vRoot.geoNameModal = true;
                                            rowData = params.row;
                                            vRoot.geoName = params.row.name;
                                            return false;
                                        }
                                    }
                                }, ""),
                            ])
                        }
                    }, {
                        title: isZh ? '操作' : 'Action',
                        key: 'action',
                        width: 150,
                        align: 'left',
                        render: function(h, params) {
                            var type = params.row.type;
                            return h('div', [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: isZh ? '确定要下发围栏指令吗?' : '',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        'on-ok': function(e) {
                                            rowData = params.row;
                                            var url = myUrls.pushGeoFence();
                                            var data = {
                                                deviceid: deviceid,
                                                geouuid: params.row.georecorduuid,
                                            }
                                            utils.sendAjax(url, data, function(resp) {
                                                var status = resp.status;
                                                if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                                                } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                                                } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                                                } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                                                } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                                                } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                                                } else if (status === CMD_SEND_CONFIRMED) {
                                                    vRoot.$Message.success(vRoot.$t('monitor.CMD_SEND_CONFIRMED'));
                                                } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                                                } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                                    vRoot.$Message.error(vRoot.$t('monitor.CMD_SEND_SYNC_TIMEOUT'));
                                                }
                                            });
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                            disabled: type != 6,
                                        },
                                    }, isZh ? "下发" : "Issue"),
                                ]),



                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        disabled: type != 5,
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function(e) {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            rowData = params.row;
                                            vRoot.isRoutePlanning = true;
                                            vRoot.isCircular = false;
                                            vRoot.modal = false;
                                            vRoot.isPolygon = false;
                                            vRoot.isEidt = true;
                                            vRoot.geoName = params.row.name;
                                            vRoot.distance5 = params.row.distance5;
                                            vRoot.alarmtype5 = String(params.row.alarmtype5);
                                        }
                                    }
                                }, isZh ? "编辑" : "Edit"),

                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: isZh ? "确定要删除围栏吗?" : 'Are you sure you want to delete the fence?',
                                    },
                                    style: {
                                        // marginRight: '5px',
                                    },
                                    on: {
                                        'on-ok': function(e) {

                                            var url = myUrls.delGeoRecord(),
                                                index = params.index,
                                                row = params.row;
                                            var data = {
                                                deviceid: deviceid,
                                                georecordid: row.georecordid
                                            };
                                            utils.sendAjax(url, data, function(resp) {
                                                if (resp.status === 0) {
                                                    vRoot.tableData.splice(index, 1);
                                                    vRoot.$Message.success(isZh ? "删除成功" : 'Deletion succeeded');
                                                    vRoot.polygonLayer.clear();
                                                } else {
                                                    vRoot.$Message.success(isZh ? "删除失败" : 'Deletion failed');
                                                }
                                            })
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },

                                    }, isZh ? "删除" : "Delete"),
                                ]),



                            ]);
                        }
                    }],
                    tableData: [],
                    treeData: [],
                    originalData: [],
                    loading: false,
                    isCircular: false,
                    isPolygon: false,
                    isRectangle: false,
                    isRoutePlanning: false,
                    markerIns: null,
                    radius: 0,
                    min: 200,
                    max: 100000,
                    modal: false,
                    type: null, // 1 是圈 2是多边形 3是行政区域'
                    areaAddress: [],
                    mapCenterPoint: null,
                    provinceList: provinceList,
                    userType: localStorage.getItem('userType')
                },
                methods: {
                    addRoutePlanning: function() {
                        var me = this;
                        if (me.isEidt) {
                            var url = myUrls.editGeoRecord();
                            var data = deepClone(rowData);
                            data.name = this.geoName;
                            data.distance5 = this.distance5;
                            data.alarmtype5 = this.alarmtype5;
                            utils.sendAjax(url, data, function(resp) {
                                if (resp.status === 0) {

                                    me.$Message.success(isZh ? "编辑成功" : "Edited successfully");
                                } else {
                                    me.$Message.error(isZh ? "编辑失败" : "Edited failed");
                                }
                            })
                        } else {
                            if (me.wgs84Points == null) {
                                me.$Message.error(isZh ? "查询路线还没返回" : "Added failed");
                                return;
                            }
                            var url = myUrls.addGeoRecord();
                            var data = {
                                name: this.geoName,
                                deviceid: deviceid,
                                distance5: this.distance5,
                                alarmtype5: Number(this.alarmtype5),
                                type: 5,
                                totaldistance5: this.totalDistance,
                                totalduration5: this.totalDuration,
                                points2: JSON.stringify(this.wgs84Points),
                            }

                            utils.sendAjax(url, data, function(resp) {
                                if (resp.status === 0) {
                                    me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                    me.getFenceInfo();
                                } else {
                                    me.$Message.error(isZh ? "添加失败" : "Added failed");
                                }
                            })
                        }


                    },
                    jumpSystemFence: function() {
                        var url = 'setfencesystem.html?token=' + token + '&username=' + userName;
                        window.open(url);
                    },
                    onSelectMap: function(item) {
                        this.mapType = item.mapType;
                        this.setMapType(item);
                    },
                    onSwitchTraffic: function(traffic) {
                        var isBMap = this.mapType == 'bMap';
                        if (traffic) {
                            if (isBMap) {
                                this.baiduTrafficLayer.show();
                            } else {
                                this.googleTrafficLayer.show();
                            }
                        } else {
                            if (isBMap) {
                                this.baiduTrafficLayer.hide();
                            } else {
                                this.googleTrafficLayer.hide();
                            }
                        }
                    },
                    onQueryTrack: function(records) {
                        var points = [];
                        for (var i = 0; i < records.length; i++) {
                            var track = records[i];
                            track.callat = Number(track.callat.toFixed(5));
                            track.callon = Number(track.callon.toFixed(5));
                            var g_lon_lat = wgs84togcj02(track.callon, track.callat);
                            track.gpoint = {
                                y: g_lon_lat[1],
                                x: g_lon_lat[0]
                            };
                            var lng_lat = wgs84tobd09(track.callon, track.callat);
                            track.bpoint = {
                                y: lng_lat[1],
                                x: lng_lat[0]
                            };

                            if (this.mapType == 'bMap') {
                                points.push(track.bpoint);
                            } else {
                                points.push(track.gpoint);
                            }
                        }
                        this.trackPoints = records;
                        this.drawTrack(points);
                    },
                    drawTrack: function(points) {
                        this.lineLayer.clear();
                        if (points.length > 0) {
                            var first = points[0];
                            var last = points[points.length - 1];

                            new maptalks.Marker(
                                [first.x, first.y], {
                                    symbol: {
                                        'markerFile': './images/map/marker_qidian.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }
                                }
                            ).addTo(this.lineLayer);

                            new maptalks.Marker(
                                [last.x, last.y], {
                                    symbol: {
                                        'markerFile': './images/map/marker_zhongdian.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }
                                }
                            ).addTo(this.lineLayer);

                            new maptalks.LineString(
                                points, {
                                    symbol: {
                                        'lineColor': {
                                            'type': 'linear',
                                            'colorStops': [
                                                [0.00, 'red'],
                                                [1.00, 'red']
                                            ]
                                        },
                                        'lineWidth': 4
                                    }
                                }).addTo(this.lineLayer);

                            this.fitExtent(points);
                        }
                    },
                    setMapType: function(mapInfo) {
                        this.map.removeLayer('baiduText');
                        this.map.removeLayer('aliText');
                        var me = this;
                        var newMapType = mapInfo.mapType;
                        var satelliteMap = mapInfo.satelliteMap;

                        var traffic = mapInfo.traffic;
                        if (newMapType == 'bMap') {
                            me.map.setSpatialReference({
                                projection: 'baidu'
                            });
                            var baseOption = satelliteMap ? baiduSatelliteBaseOption : baiduNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('baiduText', baiduTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gMap') {
                            var baseOption = satelliteMap ? googleSatelliteBaseOption : googleNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        } else if (newMapType == 'aMap') {
                            var baseOption = satelliteMap ? aliSatelliteBaseOption : aliNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('aliText', aliTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gChinaMap') {
                            var baseOption = satelliteMap ? googleChinaSatelliteBaseOption : googleChinaNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        }

                        me.addTrafficLayer(traffic);
                    },
                    addTrafficLayer: function(traffic) {

                        if (this.baiduTrafficLayer == null) {
                            this.baiduTrafficLayer = new maptalks.TileLayer("baidutraffic", {

                                urlTemplate: function(x, y, z) {
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return baiduTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.baiduTrafficLayer);
                            this.baiduTrafficLayer.hide();
                        }

                        if (this.googleTrafficLayer == null) {
                            this.googleTrafficLayer = new maptalks.TileLayer("googletraffic", {
                                urlTemplate: function(x, y, z) {

                                    y = Math.pow(2, z) - 1 - y;
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return googleTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.googleTrafficLayer);
                            this.googleTrafficLayer.hide();
                        }

                        this.onSwitchTraffic(traffic);

                    },
                    initMap: function() {
                        var me = this;

                        me.lastMapType = this.mapType;

                        this.map = new maptalks.Map('bmap', {
                            centerCross: true,
                            center: [106, 36.11],
                            zoom: 5,
                            minZoom: 4,
                            maxZoom: 20,
                            scaleControl: true,
                            dragRotate: false,
                            dragPitch: false,
                        });

                        // 创建line图层并添加到地图  
                        this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);
                        this.lineLayer.setZIndex(998);

                        this.setMapType({
                            mapType: this.mapType,
                            traffic: false,
                            xiansu: false,
                            satelliteMap: false
                        });

                        if (this.mapType == 'bMap') {
                            var lon_lat = wgs84tobd09(Number(lon), Number(lat));
                        } else {
                            var lon_lat = wgs84togcj02(Number(lon), Number(lat));
                        }

                        me.isLoadRoutePlanning = false;
                        me.routePlanningCoordinates = [];
                        this.map.on('click', function(e) {
                            if (me.isRoutePlanning && me.isLoadRoutePlanning == false && me.isEidt == false) {
                                if (me.startCoordinate == null) {
                                    me.wgs84Points == null
                                    me.routePlanningCoordinates = [];
                                    me.routePlanningCoordinates.push(e.coordinate);
                                    me.routePlanning.clear();
                                    me.startCoordinate = e.coordinate;
                                    me.startMarker = new maptalks.Marker(
                                        [e.coordinate.x, e.coordinate.y], {
                                            symbol: [{
                                                'markerFile': './images/map/marker_qidian.png',
                                                'markerWidth': 30,
                                                'markerHeight': 30,
                                                'markerRotation': 0,
                                                'markerDy': 0,
                                                'markerDx': 0,
                                            }, {
                                                'textFaceName': 'sans-serif',
                                                'textName': '起点',
                                                'textSize': 12,
                                                'textDy': 10,
                                                'textFill': '#ffffff',
                                                'textOpacity': 1,
                                                'textHaloFill': '#00A8D4',
                                                'textHaloRadius': 5,
                                                'textWrapWidth': null,
                                                'textWrapCharacter': '\n',
                                                'textLineSpacing': 0,
                                            }]
                                        }
                                    );
                                    me.startMarker.addTo(me.routePlanning);
                                } else {
                                    me.endCoordinate = e.coordinate;
                                    me.routePlanningCoordinates.push(e.coordinate);
                                    me.endMarker = new maptalks.Marker(
                                        [e.coordinate.x, e.coordinate.y], {
                                            symbol: [{
                                                'markerFile': './images/stop_red_32.png',
                                                'markerWidth': 30,
                                                'markerHeight': 30,
                                                'markerRotation': 0,
                                                'markerDy': 0,
                                                'markerDx': 0,
                                            }, {
                                                'textFaceName': 'sans-serif',
                                                'textName': '经过',
                                                'textSize': 12,
                                                'textDy': 10,
                                                'textFill': '#ffffff',
                                                'textOpacity': 1,
                                                'textHaloFill': '#00A8D4',
                                                'textHaloRadius': 5,
                                                'textWrapWidth': null,
                                                'textWrapCharacter': '\n',
                                                'textLineSpacing': 0,
                                            }]
                                        }
                                    );
                                    me.endMarker.addTo(me.routePlanning);
                                }

                                // if (me.endCoordinate != null && me.endCoordinate != null) {
                                //     me.queryRoutePlanning();
                                // }

                            }
                        });

                        var carMarker = new maptalks.Marker(
                            lon_lat, {
                                symbol: {
                                    'markerFile': './images/carstate/' + icontype + '_green_0.png',
                                    'markerWidth': 30,
                                    'markerHeight': 30,
                                    'markerRotation': -course,
                                    'markerDy': 15,
                                    'markerDx': 0,
                                },
                                zIndex: 1
                            }
                        );

                        var markerLayer = new maptalks.VectorLayer('carmarker', [carMarker]);
                        markerLayer.setZIndex(111);
                        markerLayer.addTo(this.map);

                        this.routePlanning = new maptalks.VectorLayer('routePlanning', []);
                        this.routePlanning.setZIndex(1110);
                        this.routePlanning.addTo(this.map);

                        var customPosition = new maptalks.control.Zoom({
                            'position': {
                                'bottom': '10',
                                'right': '10'
                            },
                            'slider': false,
                            'zoomLevel': false
                        });
                        this.map.addControl(customPosition);


                        var layer = this.polygonLayer = new maptalks.VectorLayer('vector').addTo(this.map);
                        this.polygonLayer.setZIndex(999);
                        var drawTool = this.drawTool = new maptalks.DrawTool({
                            mode: 'Point',
                            symbol: symbol,
                        }).addTo(this.map).disable();





                        this.drawTool.on('mousemove', function(param) {
                            if (me.isCircular) {
                                me.radius = param.geometry.getRadius().toFixed(2);
                            }
                        })

                        this.drawTool.on('drawend', function(param) {
                            var geometry = param.geometry;
                            var isBMap = me.mapType == 'bMap';
                            layer.addGeometry(param.geometry);
                            drawTool.disable();
                            me.$Modal.confirm({
                                title: isZh ? "温馨提示" : 'Reminder',
                                content: isZh ? "是否添加这个围栏?" : 'Submit the fence ?',
                                onOk: function() {
                                    if (me.isCircular) {
                                        var url = myUrls.addGeoRecord();
                                        var point = geometry.getCoordinates();
                                        var lon_lat = [];
                                        if (isBMap) {
                                            lon_lat = bd09towgs84(point.x, point.y);
                                        } else {
                                            lon_lat = gcj02towgs84(point.x, point.y);
                                        }
                                        data = {
                                            deviceid: deviceid,
                                            type: me.type,
                                            lat1: lon_lat[1],
                                            lon1: lon_lat[0],
                                            radius1: geometry.getRadius()
                                        };

                                        utils.sendAjax(url, data, function(resp) {
                                            if (resp.status === 0) {
                                                me.getFenceInfo();
                                                me.isCircular = false;
                                                me.$Message.success(isZh ? "保存围栏成功" : 'Save fence succeeded');
                                            } else {
                                                me.$Message.success(isZh ? "保存围栏失败" : 'Save fence fail');
                                            };
                                        });

                                    } else if (me.isPolygon) {
                                        var points = geometry.getCoordinates()[0];
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            lon_lat_s = bdPointsToWgs84s(points);
                                        } else {
                                            lon_lat_s = googlePointsToWgs84s(points);
                                        }
                                        var url = myUrls.addGeoRecord(),
                                            data = {
                                                points2: JSON.stringify(lon_lat_s),
                                                type: me.type,
                                                deviceid: deviceid
                                            };
                                        utils.sendAjax(url, data, function(resp) {
                                            if (resp.status === 0) {
                                                me.$Message.success(isZh ? "添加成功" : "Added successfully")
                                                me.getFenceInfo();
                                            } else {
                                                me.$Message.error(isZh ? "添加失败" : "Add failed")
                                            };

                                        })
                                    } else if (me.isRectangle) {
                                        var points = geometry.getCoordinates()[0];
                                        console.log('points', points);
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            lon_lat_s = bdPointsToWgs84s(points);
                                        } else {
                                            lon_lat_s = googlePointsToWgs84s(points);
                                        }
                                        var url = myUrls.addGeoRecord(),
                                            data = {
                                                points2: JSON.stringify(lon_lat_s),
                                                type: me.type,
                                                deviceid: deviceid
                                            };
                                        utils.sendAjax(url, data, function(resp) {
                                            if (resp.status === 0) {
                                                me.$Message.success(isZh ? "添加成功" : "Added successfully")
                                                me.getFenceInfo();
                                            } else {
                                                me.$Message.error(isZh ? "添加失败" : "Add failed")
                                            };

                                        })
                                    }

                                },
                                onCancel: function() {
                                    layer.clear();
                                    me.isCircular = false;
                                    me.isPolygon = false;
                                    me.isRectangle = false;
                                }
                            })
                        });

                    },
                    getIconImg: function(icontype) {

                        var imgPath = '';

                        if (utils.isLocalhost()) {
                            imgPath = myUrls.viewhost + 'images/carstate'
                        } else {
                            imgPath = '../images/carstate'
                        }

                        imgPath += '/' + icontype + '_green_0.png'

                        return imgPath;
                    },
                    getAreaName: function(province, city, county) {
                        var result = [];
                        for (var index = 0; index < provinceList.length; index++) {
                            var provinceInfo = provinceList[index];
                            if (provinceInfo.value == province) {
                                var cityList = provinceInfo.children;
                                result.push(provinceInfo.label);
                                cityList.forEach(function(cityInfo) {
                                    if (cityInfo.value == city) {
                                        result.push(cityInfo.label);
                                        var countyList = cityInfo.children;
                                        countyList.forEach(function(countyInfo) {
                                            if (countyInfo.value == county) {
                                                result.push(countyInfo.label);
                                                return false;
                                            }
                                        })
                                        return false;
                                    }
                                });
                                break;
                            }
                        }
                        return result;
                    },
                    getPolygon: function(arr) {
                        return new maptalks.Polygon(arr, {
                            visible: true,
                            editable: true,
                            cursor: 'pointer',
                            shadowBlur: 0,
                            shadowColor: 'black',
                            draggable: false,
                            dragShadow: false, // display a shadow during dragging
                            drawOnAxis: null, // force dragging stick on a axis, can be: x, y
                            symbol: symbol
                        });
                    },
                    getAllCoordinates: function(json) {
                        var outCoordinates = [];
                        var me = this;
                        var isBMap = me.mapType == 'bMap';
                        json.features.forEach(function(item) {
                            var geometry = item.geometry;
                            var coordinates = geometry.coordinates;
                            if (geometry.type == "Polygon") {
                                coordinates.forEach(function(coordinate) {
                                    var points = [];
                                    coordinate.forEach(function(point) {
                                        points.push(utils.getCurrentMapCoordinate(isBMap, point));
                                        // points.push(point);
                                    })
                                    outCoordinates.push(points);
                                })
                            } else if (geometry.type == "MultiPolygon") {
                                coordinates.forEach(function(coordinate) {
                                    var points = [];
                                    coordinate.forEach(function(pointArr) {
                                        pointArr.forEach(function(point) {
                                            points.push(utils.getCurrentMapCoordinate(isBMap, point));
                                            // points.push(point);
                                        })

                                    })
                                    outCoordinates.push(points);
                                })
                            }
                        })
                        return outCoordinates;
                    },
                    isHasAdcode: function(adcode) {
                        var isHas = false;
                        this.tableData.forEach(function(item) {
                            if (item.type == 3 && item.adcode3 == adcode) {
                                isHas = true;
                            }
                        })
                        return isHas;
                    },
                    handleSubmitArea: function() {
                        if (this.areaAddress.length) {
                            var me = this;
                            var areaName = utils.getAreaName(this.areaAddress[0], this.areaAddress[1], this.areaAddress[2]);

                            var adcode = '';
                            if (this.areaAddress.length == 1) {
                                adcode = this.areaAddress[0];
                            } else if (this.areaAddress.length == 2) {
                                adcode = this.areaAddress[1];
                            } else if (this.areaAddress.length == 3) {
                                adcode = this.areaAddress[2];
                            }
                            var isincludesub = 0;

                            if (this.isHasAdcode(adcode)) {
                                this.$Message.error(isZh ? '该区域围栏已经存在' : 'The area fence already exists');
                                return;
                            }

                            me.arealoading = true;
                            this.polygonLayer.clear();
                            $.ajax({
                                url: myUrls.queryGeoJson(adcode, isincludesub),
                                async: true,
                                success: function(json) {
                                    me.arealoading = false;
                                    var coordinates = me.getAllCoordinates(json);

                                    var polygons = [];
                                    var pointList = [];
                                    var allPointsExtends = null;
                                    coordinates.forEach(function(item) {
                                        var polygon = me.getPolygon([item]);
                                        me.polygonLayer.addGeometry(polygon);
                                        if (allPointsExtends == null) {
                                            allPointsExtends = polygon.getExtent();
                                        } else {
                                            allPointsExtends.add(polygon.getExtent());
                                        }
                                    })
                                    me.setViewPortCenter(allPointsExtends);

                                    var url = myUrls.addGeoRecord();
                                    var data = {
                                        name: areaName.join(','),
                                        adcode3: adcode,
                                        deviceid: deviceid,
                                        provinceindex3: Number(me.areaAddress[0]),
                                        cityindex3: Number(me.areaAddress[1]),
                                        areaindex3: Number(me.areaAddress[2]),
                                        provincestr3: areaName[0],
                                        citystr3: areaName[1],
                                        areastr3: areaName[2],
                                        type: me.type,
                                    }


                                    utils.sendAjax(url, data, function(resp) {
                                        if (resp.status === 0) {
                                            me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                            me.getFenceInfo();
                                        } else {
                                            me.$Message.error(isZh ? "操作失败" : "operation failed");
                                        }
                                    })

                                },
                                error() {
                                    me.arealoading = false;
                                }
                            });

                        } else {
                            this.$Message.error(isZh ? "请选择地区" : "Please select region");
                        }

                    },
                    changeGeoName: function() {
                        if (this.geoName.trim() !== "") {
                            var url = myUrls.editGeoRecord(),
                                me = this;
                            var data = deepClone(rowData);
                            data.name = me.geoName;
                            utils.sendAjax(url, data, function(resp) {
                                if (resp.status === 0) {
                                    rowData.name = me.geoName;
                                    me.geoNameModal = false;
                                    me.geoName = "";
                                    me.getFenceInfo();
                                    me.$Message.success(isZh ? "修改成功" : "Modification succeeded");
                                } else {
                                    me.$Message.error(isZh ? "修改失败" : "Modification failed");
                                }
                            })
                        } else {
                            this.$Message.error(isZh ? "请填写名称" : "Please fill in the name");
                        }
                    },
                    areaModal: function() {
                        this.$refs.selection.selectAll(false);
                        this.polygonLayer.clear();
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.isRoutePlanning = false;
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        this.routePlanning.clear();
                        this.type = 3;
                        this.modal = true;
                        this.isEidt = false;
                        this.areaAddress = [];
                        this.drawTool.disable();
                    },
                    addRoutePlanningTip: function() {
                        this.$refs.selection.selectAll(false);
                        this.polygonLayer.clear();
                        this.routePlanning.clear();
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.type = 4;
                        this.geoName = '';
                        this.distance5 = 20;
                        this.alarmtype5 = '1';
                        this.modal = false;
                        this.isEidt = false;
                        this.isRoutePlanning = true;
                        this.areaAddress = [];
                        this.drawTool.disable();
                    },
                    getTreeItemData: function(categoryid) {
                        var result = null;
                        this.originalData.forEach(function(record) {
                            if (record.categoryid === categoryid) {
                                result = record;
                            }
                        });
                        return result;
                    },
                    addFenceLabel: function(name, lon_lat) {
                        new maptalks.Label(name, lon_lat, {
                            'textSymbol': {
                                'textFaceName': 'monospace',
                                'textFill': '#34495e',
                                'textHaloFill': '#fff',
                                'textHaloRadius': 4,
                                'textSize': 12,
                                'textWeight': 'bold',
                                'textVerticalAlignment': 'top'
                            }
                        }).addTo(this.polygonLayer);
                    },
                    handleSelectChange: function(selection) {
                        globalSelection = selection;
                        var me = this;
                        var isBMap = me.mapType == 'bMap';
                        this.modal = false;
                        this.isCircular = false;
                        this.isRoutePlanning = false;
                        this.isPolygon = false;
                        this.polygonLayer.clear();
                        this.routePlanning.clear();
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        if (selection.length) {
                            var allPointsExtends = [];
                            for (var index = 0; index < selection.length; index++) {
                                var element = selection[index];
                                switch (element.type) {
                                    case 1:
                                        me.radius = element.radius1;
                                        me.isCircular = true;
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                        }
                                        var point = {
                                                x: lon_lat[0],
                                                y: lon_lat[1]
                                            }
                                            // allPoints.push(point);
                                        var circle = new maptalks.Circle(point, element.radius1, {
                                            symbol: symbol,
                                            zIndex: 999
                                        });

                                        circle.addTo(this.polygonLayer);

                                        var extent = circle.getExtent();

                                        allPointsExtends.push({
                                            x: extent.xmax,
                                            y: extent.ymax,
                                        })
                                        allPointsExtends.push({
                                            x: extent.xmin,
                                            y: extent.ymin,
                                        })
                                        me.addFenceLabel(element.name, lon_lat);
                                        break;
                                    case 6:
                                    case 2:
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                            lon_lat_s = wgs84sToBdPoints(JSON.parse(element.points2));
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                            lon_lat_s = wgs84sToGooglePoints(JSON.parse(element.points2));
                                        }

                                        var polygon = new maptalks.Polygon(lon_lat_s, {
                                            symbol: symbol
                                        }).addTo(this.polygonLayer);

                                        me.addFenceLabel(element.name, lon_lat);

                                        allPointsExtends = allPointsExtends.concat(lon_lat_s);
                                        break;
                                    case 3:
                                        var adcode = element.adcode3;
                                        var isincludesub = 0;
                                        $.ajax({
                                            url: myUrls.queryGeoJson(adcode, isincludesub),
                                            async: true,
                                            success: function(json) {
                                                var coordinates = me.getAllCoordinates(json);
                                                var polygons = [];

                                                coordinates.forEach(function(item) {
                                                    var polygon = me.getPolygon([item]);
                                                    me.polygonLayer.addGeometry(polygon);
                                                    var coordinates = polygon.getCoordinates()[0];
                                                    if (coordinates && coordinates.length) {
                                                        coordinates.forEach(function(o) {
                                                            allPointsExtends.push({
                                                                x: o.x,
                                                                y: o.y,
                                                            })
                                                        });
                                                        if (!me.isPlaying) {
                                                            me.fitExtent(allPointsExtends);
                                                        }
                                                    }

                                                })


                                            },
                                            error() {}
                                        });
                                        break;
                                    case 4:
                                        var categoryid = element.categoryid4;
                                        var info = this.getTreeItemData(categoryid);
                                        if (info) {
                                            info.children.forEach(function(record) {
                                                switch (record.type) {
                                                    case 1:
                                                        if (isBMap) {
                                                            var lon_lat = wgs84tobd09(record.lon1, record.lat1);
                                                        } else {
                                                            var lon_lat = wgs84togcj02(record.lon1, record.lat1);
                                                        }

                                                        var point = {
                                                            x: lon_lat[0],
                                                            y: lon_lat[1]
                                                        }

                                                        var circle = new maptalks.Circle(point, record.radius1, {
                                                            symbol: symbol,
                                                            zIndex: 999
                                                        });
                                                        circle.addTo(me.polygonLayer)
                                                        me.addFenceLabel(record.name, lon_lat);

                                                        var extent = circle.getExtent();
                                                        allPointsExtends.push({
                                                            x: extent.xmax,
                                                            y: extent.ymax,
                                                        })
                                                        allPointsExtends.push({
                                                            x: extent.xmin,
                                                            y: extent.ymin,
                                                        })

                                                        break;
                                                    case 2:
                                                        var lon_lat_s = [];
                                                        if (isBMap) {
                                                            var lon_lat = wgs84tobd09(record.lon1, record.lat1);
                                                            lon_lat_s = wgs84sToBdPoints(JSON.parse(record.points2));
                                                        } else {
                                                            var lon_lat = wgs84togcj02(record.lon1, record.lat1);
                                                            lon_lat_s = wgs84sToGooglePoints(JSON.parse(record.points2));
                                                        }

                                                        var polygon = new maptalks.Polygon(lon_lat_s, {
                                                            symbol: symbol
                                                        }).addTo(me.polygonLayer);
                                                        me.addFenceLabel(record.name, lon_lat);

                                                        allPointsExtends = allPointsExtends.concat(lon_lat_s);

                                                        break;
                                                    case 5:
                                                        var mapPoints = me.convertWgs84PointsToMapPoints(JSON.parse(record.points2));
                                                        allPointsExtends = allPointsExtends.concat(mapPoints);
                                                        new maptalks.LineString(
                                                            mapPoints, {
                                                                symbol: {
                                                                    'lineColor': {
                                                                        'type': 'linear',
                                                                        'colorStops': [
                                                                            [0.00, 'red'],
                                                                            [1.00, 'red']
                                                                        ]
                                                                    },
                                                                    'lineWidth': 4
                                                                }
                                                            }).addTo(me.polygonLayer);
                                                        var startCoordinate = mapPoints[0];
                                                        var endCoordinate = mapPoints[mapPoints.length - 1];
                                                        new maptalks.Marker(
                                                            [startCoordinate.x, startCoordinate.y], {
                                                                symbol: [{
                                                                    'markerFile': './images/map/marker_qidian.png',
                                                                    'markerWidth': 30,
                                                                    'markerHeight': 30,
                                                                    'markerRotation': 0,
                                                                    'markerDy': 0,
                                                                    'markerDx': 0,
                                                                }, {
                                                                    'textFaceName': 'sans-serif',
                                                                    'textName': '起点',
                                                                    'textSize': 12,
                                                                    'textDy': 10,
                                                                    'textFill': '#ffffff',
                                                                    'textOpacity': 1,
                                                                    'textHaloFill': '#00A8D4',
                                                                    'textHaloRadius': 5,
                                                                    'textWrapWidth': null,
                                                                    'textWrapCharacter': '\n',
                                                                    'textLineSpacing': 0,
                                                                }]

                                                            }
                                                        ).addTo(me.polygonLayer);
                                                        var totalDistance = record.totaldistance5;
                                                        var totalDuration = record.totalduration5;
                                                        new maptalks.Marker(
                                                            [endCoordinate.x, endCoordinate.y], {
                                                                symbol: [{
                                                                    'markerFile': './images/map/marker_zhongdian.png',
                                                                    'markerWidth': 30,
                                                                    'markerHeight': 30,
                                                                    'markerRotation': 0,
                                                                    'markerDy': 0,
                                                                    'markerDx': 0,
                                                                }, {
                                                                    'textFaceName': 'sans-serif',
                                                                    'textName': '总里程:' + (totalDistance / 1000).toFixed(2) + '公里,时长:' + me.timeStamp(totalDuration * 1000),
                                                                    'textSize': 12,
                                                                    'textDy': 10,
                                                                    'textFill': '#ffffff',
                                                                    'textOpacity': 1,
                                                                    'textHaloFill': '#00A8D4',
                                                                    'textHaloRadius': 5,
                                                                    'textWrapWidth': null,
                                                                    'textWrapCharacter': '\n',
                                                                    'textLineSpacing': 0,
                                                                }]
                                                            }
                                                        ).addTo(me.polygonLayer);
                                                        break;
                                                }
                                            });
                                        }
                                        break;
                                    case 5:
                                        var mapPoints = me.convertWgs84PointsToMapPoints(JSON.parse(element.points2));
                                        allPointsExtends = allPointsExtends.concat(mapPoints);
                                        new maptalks.LineString(
                                            mapPoints, {
                                                symbol: {
                                                    'lineColor': {
                                                        'type': 'linear',
                                                        'colorStops': [
                                                            [0.00, 'red'],
                                                            [1.00, 'red']
                                                        ]
                                                    },
                                                    'lineWidth': 4
                                                }
                                            }).addTo(me.polygonLayer);
                                        var startCoordinate = mapPoints[0];
                                        var endCoordinate = mapPoints[mapPoints.length - 1];
                                        new maptalks.Marker(
                                            [startCoordinate.x, startCoordinate.y], {
                                                symbol: [{
                                                    'markerFile': './images/map/marker_qidian.png',
                                                    'markerWidth': 30,
                                                    'markerHeight': 30,
                                                    'markerRotation': 0,
                                                    'markerDy': 0,
                                                    'markerDx': 0,
                                                }, {
                                                    'textFaceName': 'sans-serif',
                                                    'textName': '起点',
                                                    'textSize': 12,
                                                    'textDy': 10,
                                                    'textFill': '#ffffff',
                                                    'textOpacity': 1,
                                                    'textHaloFill': '#00A8D4',
                                                    'textHaloRadius': 5,
                                                    'textWrapWidth': null,
                                                    'textWrapCharacter': '\n',
                                                    'textLineSpacing': 0,
                                                }]

                                            }
                                        ).addTo(me.polygonLayer);
                                        var totalDistance = element.totaldistance5;
                                        var totalDuration = element.totalduration5;
                                        new maptalks.Marker(
                                            [endCoordinate.x, endCoordinate.y], {
                                                symbol: [{
                                                    'markerFile': './images/map/marker_zhongdian.png',
                                                    'markerWidth': 30,
                                                    'markerHeight': 30,
                                                    'markerRotation': 0,
                                                    'markerDy': 0,
                                                    'markerDx': 0,
                                                }, {
                                                    'textFaceName': 'sans-serif',
                                                    'textName': '总里程:' + (totalDistance / 1000).toFixed(2) + '公里,时长:' + me.timeStamp(totalDuration * 1000),
                                                    'textSize': 12,
                                                    'textDy': 10,
                                                    'textFill': '#ffffff',
                                                    'textOpacity': 1,
                                                    'textHaloFill': '#00A8D4',
                                                    'textHaloRadius': 5,
                                                    'textWrapWidth': null,
                                                    'textWrapCharacter': '\n',
                                                    'textLineSpacing': 0,
                                                }]
                                            }
                                        ).addTo(me.polygonLayer);
                                        break;
                                }
                            }

                            this.fitExtent(allPointsExtends);


                        }
                    },
                    drawCircular: function() {
                        this.$refs.selection.selectAll(false);
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        this.routePlanning.clear();
                        this.polygonLayer.clear();
                        this.radius = 0;
                        this.isEidt = false;
                        this.isCircular = true;
                        this.isPolygon = false;
                        this.isRectangle = false;
                        this.type = 1;
                        this.isRoutePlanning = false;
                        this.drawTool.setMode('Circle').enable();
                    },
                    drawRectangle: function() {
                        this.$refs.selection.selectAll(false);
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        this.routePlanning.clear();
                        this.polygonLayer.clear();
                        this.radius = 0;
                        this.isEidt = false;
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.isRectangle = true;
                        this.type = 6;
                        this.isRoutePlanning = false;
                        this.drawTool.setMode('Rectangle').enable();
                    },
                    drawPolygon: function() {
                        this.$refs.selection.selectAll(false);
                        this.startCoordinate = null;
                        this.endCoordinate = null;
                        this.routePlanning.clear();
                        this.type = 2;
                        this.polygonLayer.clear();
                        this.isCircular = false;
                        this.modal = false;
                        this.isRoutePlanning = false;
                        this.isPolygon = true;
                        this.isRectangle = false;
                        this.isEidt = false;
                        this.drawTool.setMode('Polygon').enable();
                    },
                    setViewPortCenter: function(pointListExtent) {
                        this.map.fitExtent(pointListExtent, 0);
                    },
                    fitExtent: function(pointList) {
                        if (pointList.length > 1) {
                            var polygon = new maptalks.Polygon(pointList);
                            this.map.fitExtent(polygon.getExtent(), 0);
                            polygon = null;
                        } else {
                            var point = pointList[0];
                            if (point) {
                                this.map.setCenter(point);
                            }
                        }
                    },
                    getMapCenterPoint: function() {
                        var pt = this.map.getCenter();
                        this.mapCenterPoint = pt;
                    },
                    getFenceInfo: function() {
                        var url = myUrls.queryGeoRecords();
                        utils.sendAjax(url, {
                            deviceid: deviceid
                        }, this.doFenceInfo);
                    },
                    doFenceInfo: function(resp) {
                        globalSelection = [];
                        if (resp.status === 0 && resp.records && resp.records.length) {
                            this.tableData = resp.records;
                        } else {
                            this.$Message.error(isZh ? '没有数据' : 'no data');
                        }
                    },
                    openDrawer: function() {
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.isRectangle = false;
                        this.modal = false;
                        this.isRoutePlanning = false;
                        this.drawerModal = true;
                    },
                    _queryGeoSystemRecords: function() {
                        var url = myUrls.queryGeoSystemRecords(),
                            me = this;
                        utils.sendAjax(url, {}, function(resp) {
                            if (resp.status == 0) {
                                if (resp.categorys) {
                                    me.filterOriginalData(resp.categorys);
                                }
                            }
                        })
                    },
                    filterOriginalData: function(categorys) {
                        var originalData = [];
                        categorys.forEach(function(item) {
                            var treeItem = {
                                title: item.name,
                                categoryid: item.categoryid,
                                children: [],
                                render: treeItemRender
                            };
                            item.records.forEach(function(record) {
                                record.title = record.name;
                                record.render = treeItemRender;
                                record.categoryid = item.categoryid,
                                    treeItem.children.push(record);
                            });
                            originalData.push(treeItem);
                        });
                        this.originalData = originalData;
                        this.treeData = originalData;
                    },
                    searchChange: utils.debounce(function(vm, value) {
                        if (value) {
                            var filterData = [];
                            var originalData = deepClone(vm.originalData);
                            originalData.forEach(function(item) {
                                item.expand = true;
                                if (item.title.indexOf(value) != -1) {
                                    filterData.push(item);
                                } else {
                                    var children = []
                                    item.children.forEach(function(record) {
                                        if (record.title.indexOf(value) != -1) {
                                            children.push(record);
                                        }
                                    });
                                    if (children.length) {
                                        item.children = children;
                                        filterData.push(item);
                                    }
                                }
                            });
                            vm.treeData = filterData;
                        } else {
                            vm.treeData = vm.originalData;
                        }
                    }, 500),
                    queryRoutePlanning: function() {
                        var me = this;
                        me.isLoadRoutePlanning = true;
                        me.wgs84Points = null;
                        var isBMap = this.mapType == 'bMap';
                        var routePlanningCoordinates = null;

                        if (isBMap) {
                            routePlanningCoordinates = me.routePlanningCoordinates.map(function(item) {
                                var point = bd09togcj02(item.x, item.y);
                                return {
                                    x: Number(point[0].toFixed(6)),
                                    y: Number(point[1].toFixed(6)),
                                }
                            });
                        } else {
                            routePlanningCoordinates = me.routePlanningCoordinates.map(function(item) {
                                return {
                                    x: Number(item.x.toFixed(6)),
                                    y: Number(item.y.toFixed(6)),
                                }
                            });

                        }
                        var startCoordinate = routePlanningCoordinates.shift();
                        var endCoordinate = routePlanningCoordinates.pop();


                        var url = 'https://restapi.amap.com/v3/direction/driving?origin=' + startCoordinate.x + ',' + startCoordinate.y + '&destination=' + endCoordinate.x + ',' + endCoordinate.y + '&output=json&key=7d965b1fc170725157ee74df02b7119a&platform=JS';

                        if (routePlanningCoordinates.length > 0) {
                            var waypoints = "";
                            var length = routePlanningCoordinates.length - 1;
                            routePlanningCoordinates.forEach(function(item, index) {
                                if (length == index) {
                                    waypoints += item.x + "," + item.y;
                                } else {
                                    waypoints += item.x + "," + item.y + ";";
                                }
                            })
                            url = url + "&waypoints=" + waypoints;
                        }
                        $.ajax({
                            url: url,
                            type: 'get',
                            success: function(result) {
                                me.isLoadRoutePlanning = false;
                                if (result.status == 1) {
                                    var wgs84Points = me.convertAmapRouteJsonToPoints(result.route);
                                    var mapPoints = me.convertWgs84PointsToMapPoints(wgs84Points);
                                    me.wgs84Points = wgs84Points;

                                    new maptalks.LineString(
                                        mapPoints, {
                                            symbol: {
                                                'lineColor': {
                                                    'type': 'linear',
                                                    'colorStops': [
                                                        [0.00, 'red'],
                                                        [1.00, 'red']
                                                    ]
                                                },
                                                'lineWidth': 4
                                            }
                                        }).addTo(me.routePlanning);

                                    var paths = result.route.paths;
                                    var totalDistance = 0;
                                    var totalDuration = 0;
                                    paths.forEach(function(path) {
                                        totalDistance += Number(path.distance);
                                        totalDuration += Number(path.duration);
                                    });
                                    me.totalDistance = totalDistance;
                                    me.totalDuration = totalDuration;
                                    me.endMarker.setSymbol([{
                                        'markerFile': './images/map/marker_zhongdian.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }, {
                                        'textFaceName': 'sans-serif',
                                        'textName': '总里程:' + (totalDistance / 1000).toFixed(2) + '公里,时长:' + me.timeStamp(totalDuration * 1000),
                                        'textSize': 12,
                                        'textDy': 10,
                                        'textFill': '#ffffff',
                                        'textOpacity': 1,
                                        'textHaloFill': '#00A8D4',
                                        'textHaloRadius': 5,
                                        'textWrapWidth': null,
                                        'textWrapCharacter': '\n',
                                        'textLineSpacing': 0,
                                    }]);
                                    me.geoName = '';
                                } else {
                                    me.$Message.error(isZh ? "没有查询到路线" : "No route found");
                                    me.routePlanning.clear();
                                    me.totalDistance = 0;
                                    me.totalDuration = 0;
                                    console.log("queryRoutePlanning from amap:", result);
                                }
                                me.startCoordinate = null;
                                me.endCoordinate = null;
                            },
                            error: function(err) {
                                me.$Message.error(isZh ? "查询路线失败" : "Failed to query route");
                                me.routePlanning.clear();
                                me.isLoadRoutePlanning = false;
                                me.startCoordinate = null;
                                me.endCoordinate = null;
                            }
                        });
                    },
                    timeStamp: function(mss) {
                        var strTime = '';
                        var days = parseInt(mss / (1000 * 60 * 60 * 24));
                        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = parseInt((mss % (1000 * 60)) / 1000);
                        if (days > 0) {
                            strTime = days ? (strTime += days + (isZh ? '天' : 'day')) : '';
                        } else {
                            hours ? (strTime += hours + (isZh ? '小时' : 'h')) : '';
                            minutes ? (strTime += minutes + (isZh ? '分' : 'm')) : '';
                            seconds ? (strTime += seconds + (isZh ? '秒' : 's')) : '';
                        }
                        return strTime == '' ? '0' + (isZh ? '分' : 'm') : strTime;
                    },
                    convertAmapRouteJsonToPoints: function(amapRoute) {
                        var points = [];
                        var totalStepsStr = "";
                        var paths = amapRoute.paths;
                        if (paths) {
                            var path = paths[0];
                            if (path) {
                                var steps = path.steps;
                                if (steps) {
                                    steps.forEach(function(stepStr) {
                                        totalStepsStr += stepStr.polyline + ";";
                                    })

                                }
                            }
                        }

                        if (totalStepsStr.length > 1) {
                            var splitedSteps = totalStepsStr.split(";");
                            splitedSteps.forEach(function(step) {
                                if (step.length > 0) {
                                    var onePoint = step.split(",");
                                    var x = onePoint[0];
                                    var y = onePoint[1];
                                    var wgs84Ponts = gcj02towgs84(Number(x), Number(y));
                                    points.push({
                                        x: Number(wgs84Ponts[0].toFixed(6)),
                                        y: Number(wgs84Ponts[1].toFixed(6)),
                                    })
                                }
                            })
                        }

                        return points;
                    },
                    convertWgs84PointsToMapPoints: function(wgs84Ponts) {
                        var isBMap = this.mapType == 'bMap';
                        var mapPonts = [];
                        wgs84Ponts.forEach(function(point) {
                            var point = utils.getCurrentMapCoordinate(isBMap, [point.x, point.y]);
                            mapPonts.push({
                                x: point[0],
                                y: point[1],
                            })
                        });
                        return mapPonts;
                    }
                },

                computed: {
                    areaTitle: function() {
                        if (this.isEidt) {
                            return isZh ? '编辑区域围栏' : 'edit zone fence';
                        } else {
                            return isZh ? '添加区域围栏' : 'add zone fence';
                        }
                    }
                },
                watch: {
                    searchValue: function(newValue) {
                        this.searchChange(this, newValue);
                    },
                    mapType: function(newVal) {

                        if (newVal == 'bMap') {
                            var lon_lat = wgs84tobd09(Number(lon), Number(lat));
                        } else {
                            var lon_lat = wgs84togcj02(Number(lon), Number(lat));
                        }

                        var markerLayer = this.map.getLayer('carmarker');
                        markerLayer.getGeometries()[0].setCoordinates({
                            x: lon_lat[0],
                            y: lon_lat[1],
                        })

                        this.handleSelectChange(globalSelection);

                        if (this.trackPoints) {
                            var points = [];
                            if (newVal == 'bMap') {
                                this.trackPoints.forEach(function(item) {
                                    points.push(item.bpoint)
                                });
                            } else {
                                this.trackPoints.forEach(function(item) {
                                    points.push(item.gpoint)
                                });
                            }
                            this.drawTrack(points);
                        }
                    },
                },
                mounted: function() {
                    this.initMap();
                    this.getFenceInfo();
                    this._queryGeoSystemRecords();
                }
            });
        })();
    </script>
</body>

</html>